<%-- 
    Document   : estatisticas
    Created on : 16/06/2013, 12:45:35
    Author     : Diego
--%>
<%@page import="pergunta.Pergunta"%>
<%@page import="pergunta.EstatisticaPergunta"%>
<%@page import="java.util.Map.Entry"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%
    String raiz = getServletContext().getContextPath();
    if (raiz == null) {
        raiz = "";
    } else {
        raiz = raiz + "/";
    }
%>
<%@page import="java.util.List"%>
<%@page import="basicas.Usuario"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="CSS/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="CSS/estilo.css" rel="stylesheet" type="text/css"/>
        <link rel="shortcut icon" href="<%=raiz%>Imagens/quiz_logo_1.gif"/>
        <script src="<%=raiz%>JS/jquery-2.0.1.min.js" ></script>
        <script src="<%=raiz%>JS/Highcharts-3.0.2/js/highcharts.js"></script>
        <title>Estatisticas</title>
        <%
            List<Usuario> usuarios = (List) session.getAttribute("usuarios");
            List<String> posicoes = (List) session.getAttribute("posicoes");
            Usuario u = (Usuario) session.getAttribute("usuario");
            int i = 0;
            String nome = u.getNome();
            Usuario aux = null;
            HttpServletRequest req = request;
            int acertos = (Integer) request.getAttribute("acertos");
            int erros = (Integer) request.getAttribute("erros");
            //Construção dos dados do gráfico de dificuldade
            String strDificuldades = (String) request.getAttribute("dadosDificuldade");

            //Gráfico de acertos/erro por assunto

            String[] dadosAcertoAssunto = (String[]) request.getAttribute("dadosAcertoAssunto");
            // Gráfico de acertos/erro por dificuldade
            String[] dadosAcertoDificuldade = (String[]) request.getAttribute("dadosAcertoDificuldade");

//            Tabela da pergunta com maior taxa de erros:
            EstatisticaPergunta estatisticaPergunta = (EstatisticaPergunta) request.getAttribute("acertosErrosPerguntaMaiorTaxaErro");
            Pergunta pergunta = (Pergunta) request.getAttribute("perguntaMaiorTaxaErro");
            float pc = ((float)estatisticaPergunta.getQtdeErros()/(float)(estatisticaPergunta.getQtdeAcertos()+estatisticaPergunta.getQtdeErros()))*100;
            String porcentagem = String.format("%.2f",pc);
            String dificuldadePergunta = "";
            switch (pergunta.getDificuldade()) {
                case 0:
                    dificuldadePergunta = "Fácil";
                    break;
                case 1:
                    dificuldadePergunta = "Médio";
                    break;
                case 2:
                    dificuldadePergunta = "Difícil";
                    break;
            }
        %>
    </head>
    <body>


        <div id="tudo">
            <div id="cabecalho">
                <p>
                    <img src="Imagens/TADS.png" />
                    <img src="Imagens/quiz_logo.png" /></p>
            </div>

            <div id="mensagem">

                <c:if test="${usuarios != null}">
                    <div>
                        <h1>Estatisticas Pessoais</h1>
                        <table border="1px solid black"> 
                            <thead>
                                <tr>
                                    <th colspan="2">Nome</th>
                                    <th colspan="2">Acertos</th>
                                    <th colspan="2">Erros</th>
                                    <th colspan="2">Total de Perguntas</th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr>
                                    <td colspan="2" rowspan="2"> <%=u.getNome()%></td>
                                    <td colspan="2" rowspan="2"> ${acertos}</td>
                                    <td colspan="2" rowspan="2">${erros}</td>
                                    <td colspan="2" rowspan="2">${total}</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="8"> Aproveitamento: <c:if test="${total != 0}"><fmt:formatNumber value="${acertos/total}" maxIntegerDigits="2"
                                                                                 maxFractionDigits="2" type="percent" /></td>
                                        </c:if>    
                                        <c:if test="${total eq 0}">
                                            <c:out value="0%" />
                                        </c:if>
                                </tr>
                            </tfoot>
                        </table>

                        <div id="aproveitamento">           
                        </div>
                        <div id="dificuldade"></div>
                        <div id="acertosAssunto"></div>
                        <div id="acertosDificuldade"></div>
                    </div>
                    <div>
                        <h3>Pergunta com a maior taxa de erros</h3>
                        <table border="1px solid black">
                            <tr><th colspan="3">Pergunta</th></tr>
                            <tr><td colspan="3"><%=pergunta.getTexto()%></td></tr>
                            <tr>
                                <th colspan="2">Assunto</th>
                                <th>Nível</th>
                            <tr>
                                <td colspan="2"><%=pergunta.getTema()%></td>
                                <td>
                                    <%=dificuldadePergunta%></td>
                            </tr>
                            <tr>
                                <th>Acertos</th>
                                <th>Erros</th>
                                <th>Taxa (%) de Erros</th>
                            </tr>
                            <tr>
                                <td><%=estatisticaPergunta.getQtdeAcertos()%></td>
                                <td><%=estatisticaPergunta.getQtdeErros()%></td>
                                <td><%=porcentagem +"%"%></td>
                            </tr>
                            <tr>
                                <th colspan="3">Alternativas</th>
                                
                            </tr>
                            <tr><td>A</td><td colspan="2"><%=pergunta.getLetraA()%></td></tr>
                            <tr><td>B</td><td colspan="2"><%=pergunta.getLetraB()%></td></tr>
                            <tr><td>C</td><td colspan="2"><%=pergunta.getLetraC()%></td></tr>
                            <tr><td>D</td><td colspan="2"><%=pergunta.getLetraD()%></td></tr>
                            <tr><td>E</td><td colspan="2"><%=pergunta.getLetraE()%></td></tr>
                            

                        </table>
                    </div>
                    <div>
                        <h1>Ranking Geral</h1>

                        <table border="1px solid black">

                            <tr>
                                <th colspan="2">Colocacao</th>
                                <th colspan="2">Usuario</th>
                                <th colspan="2">Numero de Acertos</th>
                            </tr>
                            <c:forEach items="${usuarios}" varStatus="i">
                                <tr>
                                    <td colspan="2"><c:out value="${(i.index) + 1}"/></td>
                                    <td colspan="2"><c:out value="${usuarios.get(i.index).getNome()}"/>        
                                    </td>
                                    <td colspan="2"><c:out value="${posicoes.get(i.index)}"/></td>
                                </tr>

                            </c:forEach>

                        </table>

                    </div>
                </c:if>

                <c:if test="${usuarios == null}">
                    <p>Ops,Não há dados a serem exibidos!</p>
                </c:if>



                <a href="<%=raiz%>User/inicialUsuario.jsp" >Voltar a pagina principal</a>
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                $('#aproveitamento').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Aproveitamento individual'
                    },
                    tooltip: {
                        pointFormat: '{series.name} {point.name}: <b>{point.y}</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                format: '<b>Percent. {point.name}</b>: {point.percentage:.1f} %'
                            }
                        }
                    },
                    series: [{
                            type: 'pie',
                            name: ' ',
                            data: [
                                ['Acertos',<%=acertos%>],
                                ['Erros',<%=erros%>]
                            ]
                        }]
                });
            });

            $(function() {
                $('#dificuldade').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Quetões respondidas por dificuldade'
                    },
                    tooltip: {
                        pointFormat: '{series.name} - {point.name}: <b>{point.y}</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                format: '<b>Nível {point.name}</b>: {point.percentage:.1f} %'
                            }
                        }
                    },
                    series: [{
                            type: 'pie',
                            name: 'Perguntas respondidas',
                            data: [
            <%=strDificuldades%>
                            ]
                        }]
                });
            });

            $(function() {
                $('#acertosDificuldade').highcharts({
                    colors: [
                        '#AA4643',
                        '#4572A7'
                    ],
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Acertos e erros por nível'
                    },
                    xAxis: {
                        categories: <%=dadosAcertoDificuldade[0]%>
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Total de questões'
                        }
                    },
                    tooltip: {
                        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                        shared: true
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal'
                        }
                    },
                    series: <%=dadosAcertoDificuldade[1]%>
                });
            });

            $(function() {
                $('#acertosAssunto').highcharts({
                    colors: [
                        '#AA4643',
                        '#4572A7'
                    ],
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Acertos e erros por assunto'
                    },
                    xAxis: {
                        categories: <%=dadosAcertoAssunto[0]%>
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Total de questões'
                        }
                    },
                    tooltip: {
                        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                        shared: true
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal'
                        }
                    },
                    series: <%=dadosAcertoAssunto[1]%>
                });
            });


        </script>

    </body>
</html>
